<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册千利千寻账户 - 千利千寻 - 中国领先互联网金融导购返利平台</title>
		<link rel="stylesheet" th:href="@{/front/plugin/bootstrap-3.3.5/css/bootstrap.min.css}">
		<link rel="stylesheet" th:href="@{/front/plugin/bootstrapvalidator/dist/css/bootstrapValidator.min.css}"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<script type="text/javascript" th:src="@{/front/plugin/bootstrapvalidator/dist/js/bootstrapValidator.min.js}"></script>
<style type="text/css">
<!--
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #FFFFFF; }
a:link { text-decoration: none; color: #2eb971; }
a:visited { text-decoration: none; color: #2eb971; }
a:hover { text-decoration: underline; color: #2eb971; }
a:active { text-decoration: none; color: #2eb971; }
.inp1 { border: 1px solid #FFFFFF; background-color: #FFFFFF; background-repeat: no-repeat; height: 20px; font-size: 14px }
.inp2 { border: 1px solid #cccccc; background-color: #FFFFFF; background-repeat: no-repeat; height: 30px; font-size: 14px }
.inp3 { border: 1px solid #cff3e3; background-color: #F3FcF8; background-repeat: no-repeat; height: 40px; font-size: 16px }
.STYLE41 { font-family: "Helvetica Neue,Helvetica,Arial,sans-serif"; font-size: 14px; color: #666666; }
.STYLE42 { font-family: "Helvetica Neue,Helvetica,Arial,sans-serif"; font-size: 14px; font-weight: bold; }
.form-horizontal label{font-weight:100;}
.btn-primary,.btn-primary:hover,.btn-primary[disabled],.btn-primary[disabled]:hover,.btn-primary[disabled]:focus,.btn-primary:focus{background-color:#2EB971; border-color:#2EB971;width:300px;}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { background-color: #24945a; border-color: #24945a; color: #fff;
}
.STYLE143 {font-size: 14px; color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif;}
-->
.wp{
    width: 350px;
    position: absolute;
    right:300px;
    padding-top: 60px;
}
.sdgf{
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
.sdgf input{
    height: 50px;
    background: #F4F8F9;
    border:0;
    outline: none;
}
.sdgf button{
    height:50px;
}
</style></head>

<body>
<div th:replace="/front/common::header22"></div>
<div style="position: relative; min-height: 600px;background: url(/front/img/bg_login.png) no-repeat;background-size: cover;">
    <div class="wp">
        <table class="sdgf" width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
            <tr>
                <td width="481" style="padding:20px;background: #fff;">
                    <h2 style="font-size: 20px;font-weight: bold;">注册千利千寻</h2>
                    <form id="MJF_signup_form" th:action="@{/register}" method="post" class="form-horizontal" data-bv-message="This value is not valid" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
                        <div class="form-group" style="color: red;padding-left: 15px;" th:text="${msg}"></div>
                        <div class="form-group">
                            <div class="col-lg-12">
                                <input placeholder="手机号" class="form-control" id="signup_phone" name="email" required type="phone" data-bv-isexists-message="手机号已经被占用" data-bv-notempty-message="手机号不可为空" data-bv-regexp="true" data-bv-regexp-regexp="^1[0-9]{10}$" data-bv-regexp-message="手机号格式错误" autocomplete="yes" value="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-12">
                                <input placeholder="昵称" class="form-control" name="nickName" required data-bv-notempty-message="昵称不可为空" autocomplete="off" />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-12">
                                <input placeholder="密码" type="password" class="form-control" name="passwd" data-bv-notempty="true" data-bv-notempty-message="密码不可为空" data-bv-identical="true" data-bv-identical-field="repassword" data-bv-identical-message="两次密码输入不一致" data-bv-different="true" data-bv-different-field="nickName" data-bv-different-message="密码不可与用户名相同" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-12">
                                <input placeholder="重复密码" type="password" class="form-control" name="repassword" data-bv-notempty="true" data-bv-notempty-message="重复密码不可为空" data-bv-identical="true" data-bv-identical-field="passwd" data-bv-identical-message="两次密码输入不一致" data-bv-different="true" data-bv-different-field="nickName" data-bv-different-message="重复密码不可与用户名相同" autocomplete="off" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-8">
                                <input placeholder="验证码" type="text" id="signup_vcode" class="form-control" name="vcode" required data-bv-notempty-message="验证码错误" data-bv-regexp="true" data-bv-regexp-regexp="[a-zA-Z0-9]{4}" data-bv-regexp-message="4位数字或英文(不区分大小写)" autocomplete="off" />
                            </div>
                            <span class="col-lg-4" style="height: 50px; padding:5px 17px 5px 0;"><img src="https://www.mojifen.com/vcode-doimg.html" style="cursor: pointer; width: 100%; height: 100%;" onclick="this.src='https://www.mojifen.com/vcode-doimg.html?'+Math.random();"></span>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary" style="background: #1C86F4; width: 100%;">注册就送2元人民币</button>
                            </div>
                        </div>
                    </form>
                    <div class="col-lg-12" style="padding: 0;">
                        <a style="color:#666;" th:href="@{/toFindPass}">忘记密码?</a>
                        <i style="margin: 0 20px;color:#666;">|</i>
                        <a style="color:#9B9B9B" href="/toLogin" class="STYLE42">已经有账号，点击 <i style="color:#E39AA4; font-style: normal;">直接登录&gt;&gt;</i></a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$('#MJF_signup_form').bootstrapValidator({
			submitHandler: function(validator, form, submitButton) {
				var val = $('#signup_vcode').val();
				if(val == '' || val.length != 4){
                    $('#MJF_signup_form').data('bootstrapValidator').updateStatus('vcode', 'INVALID', 'notempty');
                    return false;
                }
                validator.defaultSubmit();
			}
		});
		
		$('#signup_phone').blur(function(){
			var val = $(this).val();
			if(val == '') return false;
			$.post('/existEmail',{email:val}, function(res){
			    console.log(res);
				if(res)
					$('#MJF_signup_form').data('bootstrapValidator').updateStatus('email', 'INVALID', 'isExists');
					$('#MJF_signup_form').data('bootstrapValidator').updateStatus('email', 'VALID', 'notEmpty');
			}, 'json');
		})
	});
</script>
<table width="90%" border="0" align="center" cellpadding="30" cellspacing="0">
    <tr>
        <td height="80" align="center" class="STYLE43">Copyright 2015-2017 glw66.com All rights reserved 版权所有：千利千寻 &nbsp;&nbsp;&nbsp;&nbsp;
    </tr>
</table>
</body>
</html>
